<template>
<div class="container">
    <ul>
    <li v-for="item in newsList" :key="item.id">
        <!-- <RouterLink :to="{name:'NewsDetail', query:{id:item.id,title:item.title,content:item.content}}">{{ item.title }}</RouterLink> -->
        <!-- <RouterLink :to="`/news/detail/${item.id}/${item.title}/${item.content}`">{{ item.title }}</RouterLink> -->
        <button @click="showDetail(item)">查看详情</button>
        <RouterLink :to="{
            name:'NewsDetail',
            params:{
                id:item.id,title:item.title,content:item.content
            }
        }">{{ item.title }}</RouterLink>
    </li>
</ul>
<div class="content">
    <RouterView></RouterView>
</div>
</div>

</template>

<script lang="ts" setup name="News">

import {reactive} from 'vue'
import { useRouter } from 'vue-router';

const newsList = reactive([
    {id:"n000000000001", title:"如何一夜暴富1",content:'学IT'},
    {id:"n000000000002", title:"如何一夜暴富2",content:'学IT'},
    {id:"n000000000003", title:"如何一夜暴富3",content:'学IT'},
    {id:"n000000000004", title:"如何一夜暴富4",content:'学IT'},
])
let router = useRouter()
interface NewsDetailInterface {
    id:string,
    title:string,
    content:string,
}
function showDetail(item:NewsDetailInterface) {
    router.push({
        name:'NewsDetail',
        params:{
            id:item.id,title:item.title,content:item.content
        }
    })
}
</script>


<style scoped>
         .container {
            display: flex;
         } 
         .content {
            border: 1px solid yellow;
            padding: 50px;
         }                    
</style>